<template>
	<div>
		<mj-title type="h2" title="Tag 标签"></mj-title>
		<div class="page-desc">对不同维度进行简单的标记和分类。</div>

		<mj-title type="h5" title="基础使用"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-tag>default</mj-tag>
			    <mj-tag color="primary">primary</mj-tag>
			    <mj-tag color="success">success</mj-tag>
			    <mj-tag color="error">error</mj-tag>
			    <mj-tag color="warning">warning</mj-tag>
			    <mj-tag color="info">info</mj-tag>
			    <mj-tag color="yellow">yellow</mj-tag>
			    <mj-tag color="orange">orange</mj-tag>
			    <mj-tag color="green">green</mj-tag>
			    <mj-tag color="cyan">cyan</mj-tag>
			    <mj-tag color="blue">blue</mj-tag>
			    <mj-tag color="pink">pink</mj-tag>
			    <mj-tag color="red">red</mj-tag>
			    <mj-tag color="#FFA2D3">自定义颜色</mj-tag>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
					  &lt;mj-tag>default&lt;/mj-tag>
					  &lt;mj-tag color="primary">primary&lt;/mj-tag>
					  &lt;mj-tag color="success">success&lt;/mj-tag>
					  &lt;mj-tag color="error">error&lt;/mj-tag>
					  &lt;mj-tag color="warning">warning&lt;/mj-tag>
					  &lt;mj-tag color="info">info&lt;/mj-tag>
					  &lt;mj-tag color="yellow">yellow&lt;/mj-tag>
					  &lt;mj-tag color="orange">orange&lt;/mj-tag>
					  &lt;mj-tag color="green">green&lt;/mj-tag>
					  &lt;mj-tag color="cyan">cyan&lt;/mj-tag>
					  &lt;mj-tag color="blue">blue&lt;/mj-tag>
					  &lt;mj-tag color="pink">pink&lt;/mj-tag>
					  &lt;mj-tag color="red">red&lt;/mj-tag>
					  &lt;mj-tag color="#FFA2D3">自定义颜色&lt;/mj-tag>
					&lt;/template>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Tag 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
				<tr>
					<td>color</td>
					<td>标签颜色，预设值查看示例。也可以自定义颜色值<code>#000000</code></td>
					<td>String</td>
					<td>default</td>
				</tr>
            </tbody>
        </table>
	</div>
</template>
